<template>
  <div class="container">
    <div class="articleContainer">
      <el-form :model="form">
        <el-form-item label="文章标题:" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章简介:" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容:" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 3 }"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章封面图:" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章类型ID:" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章作者:" :label-width="formLabelWidth">
          <el-input
            v-model="form.articleTypename"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="是否推荐:" :label-width="formLabelWidth">
          <el-switch v-model="value" active-text="推荐" inactive-text="不推荐">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      formLabelWidth: "160px",
      value: true,
    };
  },
  methods: {
    //确认
    confirm() {},
    //取消
    cancel() {
      this.$router.push("/");
    },
  },
};
</script>

<style>
.container {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  height: 100vh;
}

.clearfix {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
}
.el-form-item__content {
  display: flex;
  justify-content: flex-end;
}
.dialog-footer {
  float: right;
}
</style>